<template>
	<view class="container">
		<view class="header">
			<view class="header-left">
				<view class="left-text">武汉</view>
				<u-icon class="left-icon" name="arrow-down" color="#000" size="18"></u-icon>
			</view>
			<view class="header-center">
				<view class="center-icon-fa">
					<u-icon class="center-icon" name="search" color="#000" size="30"></u-icon>
				</view>
				<input class="center-input" type="text">
			</view>
			<class class="header-right">
				<u-icon class="left-icon" name="more-circle" color="#000" size="30"></u-icon>
			</class>
		</view>
		<view class="navi">
			<u-grid class="navi-grid" :border="false" :col="5">
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/1.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/2.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/3.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/4.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/5.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/6.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/7.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/8.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/9.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
					<u-grid-item>
						<image class="grid-img"  src="../../static/icons/10.png" alt="">
						<view class="grid-text">图片</view>
					</u-grid-item>
				</u-grid>
		</view>
		<view class="like">
			<view class="like-title">
				猜你喜欢
			</view>
			<view class="like-list">
				<view class="like-list-image-contanier">
					<image class="like-list-image" mode="aspectFit" src="../../static/images/a1.jpg"></image>
				</view>
				<view class="like-list-intro">
					<view class="like-list-title">阳光利亚自主餐厅</view>
					<view class="like-list-subtitle">[2店通用]担任自助全天券</view>
					<view class="like-list-expand"></view>
					<view class="like-list-info">
						<view class="like-list-price-red">
							<view class="like-list-price-num">76.9</view>
							<view class="like-list-price-unit">元</view>
						</view>
						<view class="like-list-price-normal">
							门市价:99元
						</view>
						<view class="list-info-expand"></view>
						<view class="like-list-price-sale">
							已售166478
						</view>

					</view>
				</view>
			</view>
			
			<view class="like-list">
				<view class="like-list-image-contanier">
					<image class="like-list-image" mode="aspectFit" src="../../static/images/a1.jpg"></image>
				</view>
				<view class="like-list-intro">
					<view class="like-list-title">阳光利亚自主餐厅</view>
					<view class="like-list-subtitle">[2店通用]担任自助全天券</view>
					<view class="like-list-expand"></view>
					<view class="like-list-info">
						<view class="like-list-price-red">
							<view class="like-list-price-num">76.9</view>
							<view class="like-list-price-unit">元</view>
						</view>
						<view class="like-list-price-normal">
							门市价:99元
						</view>
						<view class="list-info-expand"></view>
						<view class="like-list-price-sale">
							已售166478
						</view>
					</view>
				</view>
			</view>
			<view class="like-list">
				<view class="like-list-image-contanier">
					<image class="like-list-image" mode="aspectFit" src="../../static/images/a1.jpg"></image>
				</view>
				<view class="like-list-intro">
					<view class="like-list-title">阳光利亚自主餐厅</view>
					<view class="like-list-subtitle">[2店通用]担任自助全天券</view>
					<view class="like-list-expand"></view>
					<view class="like-list-info">
						<view class="like-list-price-red">
							<view class="like-list-price-num">76.9</view>
							<view class="like-list-price-unit">元</view>
						</view>
						<view class="like-list-price-normal">
							门市价:99元
						</view>
						<view class="list-info-expand"></view>
						<view class="like-list-price-sale">
							已售166478
						</view>
					</view>
				</view>
			</view>
			<view class="like-list">
				<view class="like-list-image-contanier">
					<image class="like-list-image" mode="aspectFit" src="../../static/images/a1.jpg"></image>
				</view>
				<view class="like-list-intro">
					<view class="like-list-title">阳光利亚自主餐厅</view>
					<view class="like-list-subtitle">[2店通用]担任自助全天券</view>
					<view class="like-list-expand"></view>
					<view class="like-list-info">
						<view class="like-list-price-red">
							<view class="like-list-price-num">76.9</view>
							<view class="like-list-price-unit">元</view>
						</view>
						<view class="like-list-price-normal">
							门市价:99元
						</view>
						<view class="list-info-expand"></view>
						<view class="like-list-price-sale">
							已售166478
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="see-all">
			<view class="all-text">查看全部团购</view>
			<view class="all-expand"></view>
			<view class="all-icon">
				<u-icon class="left-icon" name="arrow-right" color="#FE8C00" size="30"></u-icon>
			</view>
		</view>
		
		<view class="footer">
			<view class="footer-one">
				<view class="one-button">
					<view class="one-btn">
						<u-button size="default" :hair-line="false" class="custom-style" >登录</u-button>
					</view>
					<view class="one-btn u-margin-left-16">
						<u-button size="default" :hair-line="false" class="custom-style" >注册</u-button>
					</view>
				</view>
				<view class="one-expand"></view>
				<view class="one-location">
					<view class="one-location-cs">城市：</view>
					<u-icon class="one-location-icon" name="map-fill" color="#FE8C00" size="24"></u-icon>
					<view class="one-location-city">武汉</view>
				</view>
			</view>
			
			<view class="footer-two">
				<view class="two-item item-border">首页</view>
				<view class="two-item item-border">我的</view>
				<view class="two-item item-border">美团下载</view>
				<view class="two-item item-border">电脑版</view>
				<view class="two-item">帮助</view>
			</view>
			
			<view class="foot-three">
				<view class="three-others">
					<text class="others-items">友情链接: 猫眼电影</text>
					<text class="others-items">大众点评</text>
					<text class="others-items">美团旅行</text>
					<text class="others-items">榛果民宿</text>
					<text class="others-items">大众点评下载</text>
					
				</view>
			</view>
			<view class="foot-three">
				<view class="three-others">
					<text class="others-items">美团收银官网</text>
					<text class="others-items">美团大学·餐饮学院</text>
					<text class="others-items">快驴进货商家合作</text>
				</view>
			</view>
			
			<view class="foot-copyright">
				<text class="copyright-text">©2021 XXX网 京ICP证XXXXXXX号</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f0efed;
	}
	.container{
		
		.header{
			display: flex;
			height: 80upx;
			background-color: #FFD000;
			.header-left{
				width: 120upx;
				height: inherit;
				&:hover{
				  &{
					outline: none;
				  }
				  &:before{
					background-color: red;
				  }
				}
				
				.left-text{
					// padding: 20upx;
					display: inline-block;
					padding-left: 20upx;
					line-height: 80upx;
				}
				.left-icon{
					display: inline-block;
					padding-left: 10upx;
					
				}
			}
			
			.header-center{
				flex: 1;
				padding:10upx 0 ;
				display: flex;
				.center-icon-fa{
					position: relative;
					width: 80upx;
					height: 62upx;
					border-top-left-radius: 10upx;
					border-bottom-left-radius: 10upx;
					background-color: white;
					text-align: center;
					line-height: 62upx;
					.center-icon{
						// position: absolute;
						// left:10upx;
						// top: 10upx;
					}
				}
				.center-input{
					flex: 1;
					height: 62upx;
					background-color: white;
					// border-radius: 10upx;
					border-top-right-radius: 10upx;
					border-bottom-right-radius: 10upx;
				}
				
			}
			
			.header-right{
				width: 80upx;
				height: inherit;
				text-align: center;
				line-height: 80upx;
			}
		}
		
		.navi{
			height: 380upx;
			align-content: flex-end;
			.navi-grid{
				 // margin-top: 20upx;
				.grid-img{
					height: 80upx;
					width: 80upx;
				}
				.grid-text{
					margin-top: 10upx;
				}
			}
		}
		
		.like{
			background-color: white;
			padding: 20upx 0 0 20upx;
			.like-title{
				font-size: 30upx;
				margin-bottom: 20upx;
			}
			.like-list2{
				border-bottom: 1px solid #C0C4CC ;
			}
			.like-list{
				border-top: 1px solid #C0C4CC ;
				padding: 20upx 0;
				display: flex;
				flex-direction: row;
				.like-list-image-contanier{
					width: 180upx;
					height: 180upx;
					.like-list-image{
						width: inherit;
						height: inherit;
					}
				}
				.like-list-intro{
					display: flex;
					flex:1;
					margin: 0 20upx;
					flex-direction: column;
					justify-content: flex-start;
					font-size: 24upx;
					.like-list-title{
						font-size: 28upx;
						font-weight: 700;
					}
					.like-list-expand{
						flex:1
					}
					.like-list-info{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						
						.like-list-price-red{
							color: red;
							.like-list-price-num{
								font-size: 40upx;
								display: inline-block;
							}
							.like-list-price-unit{
								display: inline-block;
								
							}
						}
						.like-list-price-normal{
							height: auto;
							margin-left: 10upx;
							margin-bottom: 4upx;
							display: flex;
							align-items: flex-end;
						}
						.list-info-expand{
							flex:1
						}
						
						.like-list-price-sale{
							margin-bottom: 4upx;
							display: flex;
							align-items: flex-end;
						}
					}
				}
			}
		}
		
		.see-all{
			background-color: white;
			border-top:1upx solid #C0C4CC;
			border-bottom:1upx solid #C0C4CC;
			padding: 20upx;
			display: flex;
			.all-text{
				color:#FE8C00;
			}
			
			.all-expand{
				flex:1
			}
			.all-icon{
				
			}
		}
		
		
		.footer{
			background-color: white;
			padding: 20upx;
			.footer-one{
				width: 100%;
				display: flex;
				padding: 20upx;
				flex-direction: row;
				justify-content: space-between;
				font-size: 22upx;
				white-space:nowrap;
				.one-button{
					display: inline-block;
					.one-btn{
						width: auto;
						display: inline-block;
						.custom-style{
							font-size: 20upx;
							color:#222;
							width: 80upx;
							height: 40upx;
							background: linear-gradient(135deg,#FFD000 0,#FFBD00 100%);
						}
					}
				}
				.one-expand{
					height: inherit;
					flex:1
				}
				.one-location{
					display: inline-block;
					.one-location-cs{
						display: inline-block;
					}
					.one-location-icon{
						display: inline-block;
					}
					.one-location-city{
						display: inline-block;
					}
				}
				
				
				
				
			}
			.footer-two{
				padding: 10upx 0;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				margin-bottom: 20upx;
				flex:1;
				.two-item{
					color:#FE8C00;
					font-size: 20upx;
					width: 20%;
					text-align: center;
				}
				.item-border{
					border-right: solid 1upx #000000;
				}
			}
			.foot-three{
				padding: 10upx 0;
				display: flex;
				font-size: 20upx;
				flex-direction: row;
				.three-friend{
					// width: 100upx;
				}
				.three-others{
					font-size: 20upx;
					flex:1;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					flex-wrap: 	wrap ;
					text-align: center;
					// align-content: flex-start;
					.others-items{
						white-space: nowrap;
						flex:1;
					}
				}
			}
			.foot-copyright{
				padding-top: 80upx;
				border-bottom: 1px solid #ccc;
				position: relative;
				// text-align: center;
				margin-left:auto;
				margin-right:auto;	
				.copyright-text{
					background-color: #fff;
					font-size: 20upx;
					padding:0 10upx;
					position: absolute;
					left:50%;
					margin-left: -190upx;
					bottom:-13upx;
					
				}
			}
		}
		
	}

	 
</style>
